import { FC } from 'react'

export type ProportionDataBoxProps = {
  value: number
  label: string
}

const ProportionDataBox: FC<ProportionDataBoxProps> = ({ value, label }) => {
  return (
    <div style={{ display: 'flex', height: 20, lineHeight: '20px' }}>
      <div
        className="dr_label"
        style={{
          fontSize: 14,
          lineHeight: '16px',
          fontFamily: 'ZQKHY',
          width: 40,
          padding: '2px 0',
          boxSizing: 'border-box',
          textAlign: 'left'
        }}
      >
        {/* <CountUp start={0} end={value} duration={2} decimals={2} /> */}
        <span>{value}</span>
        <span style={{ fontFamily: 'DIN-Bold', fontSize: 10 }}>%</span>
      </div>
      <div
        title={label}
        className="dr_label"
        style={{
          padding: '2px 0',
          fontSize: 12,
          marginLeft: 11,
          lineHeight: '14px',
          maxWidth: 112,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis'
        }}
      >
        {label}
      </div>
    </div>
  )
}

export default ProportionDataBox
